  <script setup lang="ts">
import { DotsVertical, Trash, DragDrop2, Checkbox, ArrowAutofitUp } from '@vicons/tabler'
import { computed, h, PropType } from 'vue'
import { NIcon, NSpace, NTag, NDropdown, NAvatar } from 'naive-ui'
import type { AppItem, UserApps } from '@/types/userApp'

const props = defineProps({
  data: {
    type: Object as PropType<AppItem>,
    required: true
  },
  groupList: {
    type: Array as PropType<UserApps>,
    default: () => []
  },
  showOption: {
    type: Boolean,
    default: true
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{
  (e: 'click'): void
  (e: 'delete', id: string): void
  (e: 'move', id: string, groupId: string): void
  (e: 'top', id: string): void
}>()

const generateGroupOptions = computed(() => {
  const groupOptions = props.groupList.map((item) => ({
    key: item.id,
    label: item.title, // 将 name 改为 title
    icon:
      item.id === props.data.groupId
        ? () => h(NIcon, null, { default: () => h(Checkbox) })
        : undefined
  }))
  return groupOptions
})

const actionList = computed(() => [
  {
    key: 'top',
    label: '置顶对话',
    icon: () => h(NIcon, null, { default: () => h(ArrowAutofitUp) })
  },
  {
    key: 'move',
    label: '移动到分组',
    icon: () => h(NIcon, null, { default: () => h(DragDrop2) }),
    children: generateGroupOptions.value
  },
  {
    key: 'delete',
    label: () => h('span', { class: 'text-red-500' }, '删除对话'),
    icon: () => h(NIcon, null, { default: () => h(Trash, { class: 'text-red-500' }) })
  }
])

const handleActionSelect = (key: string | number, option: { key: string | number }) => {
  if (key === 'delete') {
    emit('delete', props.data.id)
  } else if (key === 'top') {
    emit('top', props.data.id)
  } else if (key === 'move') {
    emit('move', props.data.id, option.key as string)
  }
}

const activeClass = computed(() => [
  'select-none cursor-pointer rounded-md p-1 w-full flex hover:bg-[#f5f5f5] gap-1 py-5 px-3',
  { 'bg-[#f0f0f0]': props.isActive } // 使用 props.isActive 替代 props.data.active
])

const showOptionClass = computed(() =>
  props.showOption ? 'chat-list-item__time__hover' : 'chat-list-item__time'
)
</script>

<template>
  <div :class="activeClass" @click="emit('click')">
    <div class="h-full w-13 mr-2 flex">
      <NAvatar :src="data.avatar" class="w-13 h-13 rounded-full" object-fit="cover" />
    </div>
    <div class="flex-1 min-w-0 flex flex-col justify-center gap-1 overflow-hidden">
      <span class="text-[15px] font-bold line-clamp-1">{{ data.title }}</span>
      <div v-if="data.desc" class="text-[11px] text-[#b0b0b0] line-clamp-3">
        {{ data.desc }}
      </div>
      <!-- 移除 tags 相关代码，因为 AppItem 中没有定义 tags 属性 -->
      <div v-if="data.tags" class="flex flex-wrap gap-1 line-clamp-3">
        <NTag v-for="tag in data.tags" :key="tag.name" :type="tag.type" size="tiny">
          {{ tag.name }}
        </NTag>
      </div>
    </div>
    <div class="w-[35px] flex items-center justify-center group">
      <div
        :class="[
          showOptionClass,
          'text-[11px] text-[#b0b0b0] cursor-pointer',
          { 'group-hover:hidden': showOption }
        ]"
      >
        {{
          new Date(data.lastActiveAt).toLocaleDateString('zh-CN', {
            month: '2-digit',
            day: '2-digit'
          })
        }}
      </div>
      <div v-if="showOption" class="hidden cursor-pointer group-hover:block">
        <NDropdown trigger="click" :options="actionList" @select="handleActionSelect" size="small">
          <NIcon size="20">
            <DotsVertical />
          </NIcon>
        </NDropdown>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-list-item__time__hover {
  @apply group-hover:hidden;
}
</style>
